<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <link href="./css/public.css" rel="stylesheet">
    <link href="./font/iconfont.css" rel="stylesheet">
    <link href="./css/call-car.css" rel="stylesheet">
    <title>确认呼叫</title>
</head>

<body>
    <!-- main：html5的语义化标签之一，实际上就是div，只是变了一个元素名 -->
    <main id="container">
        <header class="header">
            <div class="header-top">
                <span class="iconfont icon-zuojiantou left">
                </span>
                <span class="iconfont icon-fenxiang right"></span>
                <h2 class="title">确认呼叫</h2>
            </div>
        </header>
        <footer class="footer">
            <div class="use-car">
                <span>
                    张可爱用车
                    <span class="iconfont icon-xiajiantou"></span>
                </span>
            </div>
            <div class="center-box">
                <div class="row-1">
                    <div class="row-1-img-box">
                        <img class="img-car" src="./img/car-01.jpg">
                        <span>车辆级别名称1</span>
                    </div>
                    <ul class="select-ul">
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </div>
                <div class="row-2">
                    <div class="item">
                        <span class="iconfont icon-xuanze"></span>
                        <span>女性用车</span>
                    </div>
                    <div class="item">
                        <span class="iconfont icon-yuanquan"></span>
                        <span>残障用车</span>
                    </div>
                    <div class="item">
                        <span class="iconfont icon-xuanze"></span>
                        <span>老人用车</span>
                    </div>
                </div>
                <div class="row-3">
                    <p class="p1">
                        约<span class="money">57.50</span>元
                        <span class="iconfont icon-youjiantou"></span>
                    </p>
                    <p class="p2">
                        <span>
                            已<span class="bs">X1.3倍</span>
                        </span>
                        <span>
                            已抵<span class="money">20元</span>
                        </span>
                    </p>
                </div>
            </div>
            <button class="call-car">叫车</button>
        </footer>
    </main>
</body>
<!-- 新的语法规范推荐，js写在html文件的末尾位置，可以提高运行效率 -->
<script type="text/javascript">
    window._AMapSecurityConfig = {
        // 设置密钥
        securityJsCode: 'b5d5353863a0c66ae610f567a7a10c0c',
    }
</script>
</script>
<!-- 通过key引入地图的js -->
<script src='https://webapi.amap.com/maps?v=2.0&key=cdaf95bc9e68374e25a78f884c8bde4d'></script>
<script src="./js/call-car.js"></script>
</html>